<template>
  <div class='home'>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="item in lunbolist"
        :key="item.id"
      >
        <img
          :src="item.img"
          alt=""
        >
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="3">
      <van-grid-item
        v-for="grid in grids"
        :key="grid.id"
        :icon="grid.src"
        :text="grid.title"
        :to="grid.to"
      />
    </van-grid>
  </div>
</template>
<script>
// import axios from 'axios'
// 采用分离域名地址的方式  前面接口地址一致，域名过期
// import axios from "../../api"
// import { Toast } from 'vant'
export default {
  data: () => ({
    lunbolist: [],
    grids: []
  }),
  // created是初始化函数，放外面不是放方法里面
  created() {
    this.getlunbo()
    this.getgrids()
  },
  methods: {
    // 这里的请求路径存在冗余，可以拎出来另外配置
    async getlunbo() {
      // console.log("22222222222");
      // 根路径自动拼接上去
      // let res = await axios.get("/api/getlunbo")
      // console.log(this);

      // 这里的this指向vue组件
      // 接口参数以后也可能会改变
      // let res = await this.$http.get("/api/getlunbo")

      // try {
      //   //没有做任何参数传递，由api统一管理
      //   let res = await this.$http.getlunbo()

      //   console.log(res);
      //   //此处变量参数过长 用解构
      //   this.lunbolist = res.data.message;
      // } catch (error) {
      //   //请求不到用来提示的 比如说没网了
      //   Toast(error)
      // }

      const res = await this.$http.getlunbo()
      this.lunbolist = res.data.message
    },
    async getgrids() {
      // console.log("22222222222");
      // let res = await axios.get("http://itfly.vip:8888/api/grids")
      // let res = await this.$http.get("/api/grids")

      // try {
      //   let res = await this.$http.getgrids()

      //   console.log(res);
      //   this.grids = res.data.message;
      // } catch (error) {
      //   Toast(error)
      // }

      const res = await this.$http.getgrids()
      this.grids = res.data.message
    }
  }
}
</script>
<style lang="scss">
.home {
  .my-swipe {
    height: 200px;
    // background: pink;
    img {
      //设置图片占据父容器的百分之百
      width: 100%;
      height: 100%;
    }
  }
  // 要放开scope才能渗透 这是第三方组件的类
  .van-grid-item__icon {
    font-size: 60px;
  }
}
</style>
